<%--
  Created by IntelliJ IDEA.
  User: Herrfe
  Date: 14-5-20
  Time: 上午9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RNtnnDoVmQDbc4NVFq8s6038"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

    <title>地图监控</title>
</head>
<body>
<div id="allmap">
</div>
</body>

<script type="text/javascript">

    var map = initBaiduMap("allmap");
    var marker = addMarker(new BMap.Point(116.404, 39.915));
    addInfoWindow(marker,"车辆信息","<html>\n" +
            "<body>\n" +
            "\n" +
            "<b>车牌号：</b>闽D1231<br/>\n" +
            "<b>公司：</b>厦门卫星定位应用<br/>\n" +
            "<b>企业：</b>厦门卫星定位应用<br/>\n" +
            "<b>位置：</b>厦门思明区观日路44号<br/>\n" +
            "</body>\n" +
            "</html>");

    function addMarker(point ) {  // 创建图标对象
        var myIcon = new BMap.Icon("/images/green.png", new BMap.Size(50, 50), {
            // 指定定位位置。
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            offset: new BMap.Size(50, 50)
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
            /*imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移*/
        });
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point, {icon: myIcon});

        map.addOverlay(marker);

        return marker;

    }

    function addInfoWindow(marker,title,htmlmsg){
        var opts = {
            width : 250,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title : title    // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow(htmlmsg, opts);  // 创建信息窗口对象

        marker.addEventListener("mouseover", function(){
            map.openInfoWindow(infoWindow, marker.getPosition());      // 鼠标移入 打开信息窗口
            var lastPos = marker.getPosition();
            marker.setPosition(new BMap.Point(lastPos.lng+0.1, lastPos.lat+0.1));
        });
        marker.addEventListener("mouseout", function(){
            map.closeInfoWindow();       // 鼠标移出 关闭信息窗口
        });
        marker.addEventListener("click", function(){
            alert("可以在某个地区显示详细信息");      // 鼠标点击 查看信息窗口
        });

    }

    function initBaiduMap(divname){
        /*    百度地图API功能*/
        var map = new BMap.Map(divname);
        /*创建Map实例*/
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        /* 初始化地图,设置中心点坐标和地图级别*/
        map.addControl(new BMap.NavigationControl());
        /* 添加平移缩放控件*/
        map.addControl(new BMap.ScaleControl());
        /*添加比例尺控件*/
        map.addControl(new BMap.OverviewMapControl());
        /*添加缩略地图控件*/
        map.enableScrollWheelZoom();
        /*启用滚轮放大缩小*/
        map.addControl(new BMap.MapTypeControl());
        /*添加地图类型控件*/
        map.setCurrentCity("北京");
        /*设置地图显示的城市 此项是必须设置的*/
        /*    添加默认缩放平移控件*/
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());
        return map;
    }

</script>

</html>


